<template>
<div class="layout">
  <head :backFlag="hasback" title="Cart">
    <div class="rightBox" slot="right" @click="showDel=!showDel" :bgwidth="170">
      <text v-if="showDel" class="complete">Cancel</text>
      <text v-else class="delIcon">&#xe6e4;</text>
    </div>
  </head>

  <list class="goods-list" loadmoreoffset="30" :show-scrollbar="false">
    <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
      <loading-indicator class="indicator"></loading-indicator>
    </refresh>
    <cell>
      <div class v-if="goodsList.length==0&&!isLoading">
        <empty tips="Your Cart is empty" img="root:img/e_car.png"></empty>
      </div>
    </cell>
    <cell v-for="(row,index) in goodsList" :key="index">
      <div
        ref="itemDev"
        @swipe="handleSwipe($event,index)"
        style="flex-direction: row; width: 910px;margin-left:0;"
      >
        <div class="goods-row">
          <!-- checkbox -->
          <div class="checkBx" @click="selected(index)">
            <div class="checkbox-box">
              <text v-if="row.selected" class="iconfont selectIcon">&#xe602;</text>
              <text v-else class="iconfont noselect">&#xe67f;</text>
            </div>
          </div>
          <!-- 商品信息 -->
          <div class="goods-info">
            <div class="imgbox" @click="toGoods(row)">
              <image class="img" :src="row.thumb" />
            </div>
            <div class="info">
              <text class="title">{{row.title}}</text>
              <text class="infospec">{{row.goods_option}}</text>
              <div class="price-number">
                <text class="price">AU${{row.price}}</text>
                <div class="gnumber">
                  <div class="numaction" @click="sub(index)">
                    <text class="iconfont numIcon">&#xe630;</text>
                  </div>
                  <div class="numinputbox">
                    <!-- <input
                  class="numinput"
                  type="number"
                  v-model="row.number" 
                  @input="sum($event,index)"
                    />-->
                    <text class="numinput">{{row.number}}</text>
                  </div>
                  <div class="numaction" @click="add(index)">
                    <text class="iconfont numIcon">&#xe601;</text>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="background-color: #DA2F2F; width: 160px;   justify-content: center; align-items: center"
          @click="removeItem(row,index)"
        >
          <text style="font-size: 30px; color:#ffffff">Delete</text>
        </div>
      </div>
    </cell>
    <cell>
      <text class="loadingbox" v-if="!hasMore&&goodsList.length>0">No more</text>
    </cell>

    <loading
      class="loadingMore"
      v-if="hasMore"
      @loading="onloadmore"
      :display="loadinging ? 'show' : 'hide'"
    >
      <loading-indicator class="indicator"></loading-indicator>
    </loading>
  </list>

  <!-- 商品列表 -->

  <!-- 脚部菜单 -->
  <div>
    <div class="cartfooter" v-if="goodsList.length>0&&showDel">
      <div class="footerLeft" @click="allSelect">
        <div class="checkbox-box">
          <text v-if="isAllselected" class="iconfont selectIcon">&#xe602;</text>
          <text v-else class="iconfont noselect">&#xe67f;</text>
        </div>
        <text class="selecttext">Select all</text>
      </div>
      <text class="cardelBtnBox" @click="deleteList">Delete</text>
    </div>
    <div class="cartfooter" v-if="goodsList.length>0&&!showDel">
      <div class="footerLeft" @click="allSelect">
        <div class="checkbox-box">
          <text v-if="isAllselected" class="iconfont selectIcon">&#xe602;</text>
          <text v-else class="iconfont noselect">&#xe67f;</text>
        </div>
        <text class="selecttext">Select all</text>
      </div>

      <div class="settlement">
        <div class="sum">
          <text>Total:</text>
          <text class="symbol">AU$</text>
          <text class="money">{{sumPrice}}</text>
        </div>
        <text
          class="cartbtn"
          :style="{'background-color':sumPrice>0?'#333':'#9A9A9A'}"
          @click="toConfirmation"
        >Pay</text>
      </div>
    </div>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicators" color="#303030"></floading>
  </div>
</div>
</template>
<script>
import {
  get_order_list,
  update_order_num,
  del_order_info,
  get_order_price
} from "../../mixin/ajax.js";
import asCore from "../../mixin/core";
var animation = weex.requireModule("animation");
export default {
  data() {
    return {
      users_id: "",
      loadinging: false,
      refreshing: false,
      showDel: false,
      hasMore: true,
      hasback: false,
      sumPrice: "0.00",
      headerPosition: "fixed",
      headerTop: null,
      statusTop: null,
      selectedList: [],
      isAllselected: false,
      isLoadings: false,
      goodsList: [],
      //控制滑动效果
      theIndex: null,
      oldIndex: null,
      isStop: false,
      page: 1
    };
  },

  created() {
    this.getpageData();
    let that = this;
    const notify = weex.requireModule("notify");
    notify.regist("login", function(res) {
      that.getpageData();
    });
  },
  methods: {
    getpageData() {
      asCore.getBsessionid(users_id => {
        this.users_id = users_id;
        this.loadData();
      });
    },
    onLoad(parmars) {
      if (parmars && parmars.hasback) {
        this.hasback = true;
      }
    },
    handleSwipe(e, index) {
      if (e.direction == "left") {
        this.goLeft(index);
      } else if (e.direction == "right") {
        this.goRight(index);
      } // modal.toast({message:"==" + e.direction + "==" + index, duration:1});
    },
    goLeft(index) {
      let itemEl = this.$refs.itemDev[index]; //第二左滑条目与前一次左滑条目相同时，不处理
      if (index == this.currentIndex) {
        return;
      } //当前有划出的条目的时候，左滑其他条目，当前的条目归位，
      if (this.currentIndex != -1) {
        this.goRight(this.currentIndex);
      } //左滑当前条目

      if (this.currentIndex != index) {
        animation.transition(
          itemEl,
          {
            styles: {
              transform: "translate(-160px, 0px)",

              transformOrigin: "center center"
            },

            duration: 200, //ms

            timingFunction: "linear",

            delay: 0 //ms
          },
          function() {}
        );

        this.currentIndex = index;
      }
    },
    goRight(index, time = 200) {
      let itemEl = this.$refs.itemDev[index];

      animation.transition(
        itemEl,
        {
          styles: {
            transform: "translate(0px, 0px)",

            transformOrigin: "center center"
          },

          duration: time, //动画时间

          timingFunction: "linear", //线性运动

          delay: 0 //ms
        },
        function() {}
      );

      this.currentIndex = -1;
    },
    onrefresh(event) {
      var s = this;
      s.refreshing = true;
      s.loadData();
    },
    loadData(id) {
      if (id) {
        this.users_id = id;
      }
      if (this.isLoadings) {
        setTimeout(() => {
          this.isLoadings = false;
        }, 2000);
        return false;
      }
      this.page = 1;
      this.isAllselected = false;
      this.selectedList = [];
      this.sumPrice = 0.0;
      this.isLoadings = true;
      this.getOrerList();
    },
    onloadmore() {
      if (this.hasMore) {
        this.loadinging = true;
        this.page++;
        this.getOrerList();
      } else {
        setTimeout(() => {
          this.loadinging = false;
        }, 2000);
      }
    },
    /**获取购物车列表 */
    getOrerList() {
      let that = this;

      if (!that.users_id) {
        that.goodsList = [];
        that.isLoading = false;
        that.loadinging = false;
        that.refreshing = false;
        that.isLoadings = false;
        return false;
      }
      get_order_list(
        {
          users_id: that.users_id,
          goods_type: 1,
          page: this.page,
          page_num: "10"
        },
        (res, flag) => {
          that.isLoading = false;
          that.loadinging = false;
          that.refreshing = false;
          that.isLoadings = false;

          if (flag) {
            if (res.code == 200) {
              let list = res.data.list;
              list.forEach(item => {
                this.$set(item, "selected", false);
              });
              if (this.page > 1) {
                that.goodsList = that.goodsList.concat(list);
              } else {
                that.goodsList = list;
              }
              if (res.data.list.length < 10) {
                this.hasMore = false;
              }
            }
          }
        }
      );
    },
    //控制左滑删除效果-end

    //商品跳转
    toGoods(item) {
      this.push("root:app/goods/goods.js", {
        id: item.goods_id
      });
    },
    //跳转确认订单页面
    toConfirmation() {
      let tmpList = [];
      let len = this.goodsList.length;
      for (let i = 0; i < len; i++) {
        if (this.goodsList[i].selected) {
          tmpList.push(this.goodsList[i]);
        }
      }
      if (tmpList.length < 1) {
        this.toast("Please select an item");
        return;
      }

      this.push("root:app/order/confirm.js", { data: JSON.stringify(tmpList) });
    },
    //删除商品
    deleteGoods(id) {
      let len = this.goodsList.length;
      for (let i = 0; i < len; i++) {
        if (id == this.goodsList[i].id) {
          this.goodsList.splice(i, 1);
          break;
        }
      }

      this.selectedList.splice(this.selectedList.indexOf(id), 1);
      this.sum();
      this.oldIndex = null;
      this.theIndex = null;
    },
    removeItem(item, i) {
      //丢弃
      del_order_info(
        {
          users_id: this.users_id,
          order_id: item.id
        },
        (res, flag) => {
          this.goRight(i, 0);
          if (flag) {
            if (res.code == 200) {
              let indexs = this.selectedList.indexOf(this.goodsList[i].id);
              this.goodsList.splice(i, 1);

              if (indexs !== -1) {
                this.selectedList.splice(indexs, 1);
              }

              this.sum();
              let DelCart = new BroadcastChannel("DelCart");
              DelCart.postMessage("update");
            } else {
              this.toast(res.message);
            }
          }

          this.showDel = false;
        }
      );
    },
    // 删除商品s
    deleteList() {
      let len = this.selectedList.length;

      del_order_info(
        {
          users_id: this.users_id,
          order_id: this.selectedList.join(",")
        },
        (res, flag) => {
          if (flag) {
            let DelCart = new BroadcastChannel("DelCart");
            DelCart.postMessage("update");
            if (res.code == 200) {
              while (this.selectedList.length > 0) {
                this.deleteGoods(this.selectedList[0]);
              }
              this.showDel = false;
              this.selectedList = [];
              this.isAllselected = false;
            }
          }
        }
      );

      // this.sum();
    },
    // 选中商品
    selected(index) {
      this.goodsList[index].selected = this.goodsList[index].selected
        ? false
        : true;
      let i = this.selectedList.indexOf(this.goodsList[index].id);
      i > -1
        ? this.selectedList.splice(i, 1)
        : this.selectedList.push(this.goodsList[index].id);
      this.isAllselected = this.selectedList.length == this.goodsList.length;
      this.sum();
    },
    //全选
    allSelect() {
      let len = this.goodsList.length;
      let arr = [];
      for (let i = 0; i < len; i++) {
        this.goodsList[i].selected = this.isAllselected ? false : true;
        arr.push(this.goodsList[i].id);
      }
      this.selectedList = this.isAllselected ? [] : arr;
      this.isAllselected =
        this.isAllselected || this.goodsList.length == 0 ? false : true;
      this.sum();
    },
    // 减少数量
    sub(index) {
      if (this.goodsList[index].number <= 1) {
        this.toast("products cannot be reduced！");
        return;
      }
      let oNum = this.goodsList[index].number;
      let number = oNum - 1;
      this.goodsList[index].number--;
      this.sum();
      this.upadtenumber(index, number, oNum);
    },
    // 增加数量
    add(index) {
      let oNum = this.goodsList[index].number;
      let number = oNum + 1;
      this.goodsList[index].number = number;

      this.sum();
      this.upadtenumber(index, number, oNum);
    },
    upadtenumber(index, number, oNum) {
      update_order_num(
        {
          users_id: this.users_id,
          order_id: this.goodsList[index].id,
          number: number
        },
        (res, flag) => {
          if (flag) {
            if (res.code == 200) {
              this.goodsList[index].number = res.data.number;

              let DelCart = new BroadcastChannel("DelCart");
              DelCart.postMessage("update");
              // this.goodsList[index].total_price = res.data.total_price;
            } else {
              this.toast(res.message);
              this.goodsList[index].number = oNum;
            }
          }
          this.sum();
        }
      );
    },
    // 合计
    sum(e, index) {
      let sumPrice = 0.0;
      if (this.selectedList.length == 0) {
        this.sumPrice = 0;
        return false;
      }
      let list = this.goodsList;
      list.forEach(element => {
        if (element.selected) {
          sumPrice += element.price * element.number;
        }
      });
      this.sumPrice = sumPrice.toFixed(2);

      // get_order_price(
      //   {
      //     users_id: this.users_id,
      //     order_id: this.selectedList.join(",")
      //   },
      //   (res, flag) => {
      //     if (flag) {
      //       if (res.code == 200) {
      //         this.sumPrice = res.data.total_price;
      //       }
      //     }
      //   }
      // );
    }
  }
};
</script>
<style scoped lang="less">
.iconfont {
  font-family: iconfont;
}

.layout {
  background-color: #f2f2f2;
  flex: 1;
}

.delIcon {
  font-size: 38px;
  color: #ffffff;
  font-family: iconfont;
}

.loadingbox {
  align-items: center;
  padding: 20px;
  height: 80px;
  margin-bottom: 20px;
  text-align: center;
  color: #999999;
}
.rightBox {
  justify-content: center;
  align-items: center;
  flex-direction: row;
  // background-color: red;
  flex: 1;
  &:active {
    background-color: #222222;
  }
}
.loading {
  height: 40px;
  width: 40px;
}

.complete {
  font-size: 28px;
  color: #ffffff;
}

.goods-tis {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
}

.goods-menu {
  position: absolute;
  width: 30%;
  height: 100%;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  color: #fff;
  z-index: 2;
}

.goods-icon {
  color: #fff;
}

.goodsopen {
  animation: showMenu 0.25s linear both;
}

.goodsclose {
  animation: closeMenu 0.15s linear both;
}

.goods-list {
  background-color: #fff;
  width: 750px;
  flex: 1;
  padding: 0;
}

.goods-row {
  width: 750px;
  display: flex;
  flex-direction: row;
  padding: 20px;
  border-bottom-color: #e7e7e7;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.checkbox-box {
  width: 40px;
  height: 40px;
}

.selectIcon {
  font-size: 32px;
  color: #b98732;
}

.noselect {
  font-size: 32px;
}

.checkBx {
  width: 100px;
  height: 120px;
}

.goods-info {
  flex: 1;
  flex-direction: row;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicators {
  width: 40px;
  height: 40px;
}
.info {
  flex: 1;
}
.title {
  font-size: 28px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 1;
}

.imgbox {
  width: 140px;
  justify-content: flex-start;
  align-items: flex-start;
}

.img {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
}

.infospec {
  height: 60px;
  line-height: 60px;
  text-overflow: ellipsis;
  lines: 1;
  font-size: 24px;
}

.price-number {
  // height: 80px;
  // background-color: #f2f2f2;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  margin: 0;
}

.price {
  color: #f06c7a;
  line-height: 40px;
}

.gnumber {
  flex-direction: row;
}

.numaction {
  width: 44px;
  height: 44px;
  background-color: #e7e7e7;
  justify-content: center;
  align-items: center;
}
.numaction:active {
  background-color: #666666;
}

.numinputbox {
  width: 100px;
  height: 44px;
  background-color: #fdfeff;
}

.numinput {
  width: 100px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 28px;
  color: #000;
}

.numIcon {
  color: #fff;
}

.delBtn {
  border: solid 1px #f06c7a;
  color: #f06c7a;
  padding: 0 30px;
  height: 50px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.symbol {
  color: #ec414d;
  margin-left: 8px;
  font-size: 22px;
}

.money {
  font-weight: 600;
  margin-right: 20px;
  color: #ec414d;
  font-size: 36px;
}

.sum {
  width: 50%;
  font-size: 28px;
  margin-right: 10px;
  display: flex;
  justify-content: flex-end;
}
.loadingMore {
  width: 750;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.refresh {
  width: 750px;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

.indicator {
  height: 80px;
  width: 80px;
  text-align: center;
  color: #303030;
}

.footer {
  width: 92%;
  padding: 0 4%;
  background-color: #fbfbfb;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28px;
  position: fixed;
  bottom: 0px;
  z-index: 5;
}

.cartfooter {
  height: 100px;
  width: 750px;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.footerLeft {
  height: 100px;
  padding-left: 20px;

  flex-direction: row;
  align-items: center;
}

.selecttext {
  font-size: 30px;
  margin-left: 20px;
  line-height: 30px;
}

.cardelBtnBox {
  height: 68px;
  background-color: #303030;
  border-radius: 8px;
  width: 228px;
  justify-content: center;
  align-items: center;
  margin-right: 32px;
  text-align: center;
  font-size: 32px;
  color: #ffffff;
  line-height: 68px;
}
.cardelBtnBox:active {
  background-color: #222;
}
.cardelBtn {
  color: #2a2a2a;
}

.settlement {
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 100px;
}

.sum {
  flex-direction: row;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}

.cartbtn {
  width: 230px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 32px;
  background-color: #9a9a9a;
}
</style>
